To Do List

JavaScript重點

• 新增setupItem()方法 : 顯示目前LocalStorage所有物品的<article>元素

  function setupItems() {
  
      //取得目前LocalStorage的所有物件，並存入陣列item中
      let items = getLocalStorage();
  
      //如果items中有東西
      if (items.length > 0) {
  
          //在container中新增所有物品的<article>
          items.forEach(function (item) {
              createListItem(item.id, item.value);
          });
  
          //顯示container
          container.classList.add("show-container");
          };
      };
  

  • createListItem(id, vlaue)在【23】網頁練習 - To Do List製作(三)中有說明

• 新增setBackToDefault()方法 : 將基本變數設回原值

  function setBackToDefault() {
      //清除輸入方格的值
      grocery.value = "";
  
      //取消編輯狀態
      editFlag = false;
  
      //將編輯id清空
      editID = "";
  
      //提交按鈕的文字設回"submit"
      submitBtn.textContent = "submit";
  };
  

• 當DOMContentLoaded時，目前LocalStorage所有物品的<article>元素

  window.addEventListener("DOMContentLoaded", setupItems);
  

  • DOMContentLoaded在【06】網頁練習 - 按鈕翻頁有說明